
<style>
    html,body {
        min-height: 100%;
        height:100%;
        margin:0;
        overflow: hidden;
        background:#ccc;
    }
    .layuimini-main{margin:0;}
    .main-container,.panel-box,.main-panel,.side-panel{
        min-height: 100%;
        height:100%;
        overflow: hidden;
        margin: 0;

    }
    .main-panel{
        padding: 10px 10px;
        background:#efefef;
    }
    .side-panel{

    }
    .extra-set{
        margin-left:10px;
        background:#efefef;
        height:100%;
        padding-right: 6px;
        padding-left: 6px;
    }
    .extra-action-set{
        padding-top:10px;
    }
    .title-item {


    }
    .content-item{
        margin-top:10px;
        background:#efefef;
    }
    .content-part{
        height:100%;
    }
    .link-part {
        display: inline-block;
        background:#efefef;
        width: 90%;
        margin-left: 4%;
        margin-top: 100px;
        padding:30px 20px 10px 20px;
    }
    nav, section {
        float: left;
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background:#efefef;
        text-align: center;
        padding:  0;

    }
    .item-set{text-align:left;margin-bottom:0;}
    .layui-label-inline{
        float: left;
        display: inline-block;
        padding: 9px 15px;
        width: 260px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
    }
    .layui-input-short{
        display: inline-block;
        width: 26px;
        text-align:center;
        margin: auto 3px;
    }
    .layui-label-title{
        float: left;
        display: inline-block;
        padding: 9px 0px;
        width: 90px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
    }
    .layui-label-title i{
        color:red;
        margin-right:6px;
    }
    .layui-form-item .layui-title-input{
        width:500px;
    }
    .tab-set{border-top:1px solid #f0e3e3;border-bottom:1px solid #f0e3e3;}

    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }

    .file-item .thumbnail .file-panel{position: absolute; width: 100%; height: 16px; line-height: 16px; left: 0; right: 0; top: 0px; background: rgba(0, 0, 0, 0.4); z-index: 3; transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -webkit-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; }
    .file-item .thumbnail {overflow: hidden; float: left; width: 100px; height: 100px; margin-right: 10px; text-align: center; display: block; margin-top: 15px; line-height: 100px; background-color: #fff; border: 1px solid #ddd; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; display: inline-block; position: relative; padding: 5px; }
    .file-item .thumbnail>img {cursor: zoom-in; max-height: 100%; max-width: 100%; display: inline-block; vertical-align: middle; }
    .file-item .thumbnail .info{display: none; }
    .file-item .thumbnail .file-panel i{font-size: 12px; color: #fff;width: 16px; height: 16px; line-height: 16px;z-index: 5;cursor: pointer;}
    .file-item .thumbnail .file-panel i.move-picture{cursor: move; }
    .file-item .filenail p{text-align: left;padding-left: 10px;}
    .file-item .filenail .file-panel{position: absolute; width: 36px; height: 100px;  right: 0; top: 0px; background: rgba(0, 0, 0, 0.4); z-index: 3; transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -webkit-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; }
    .file-item .filenail {overflow: hidden;  width: 360px; height: 100px; margin-right: 10px; text-align: center; display: block; margin-top: 15px; line-height: 100px; background-color: #fff; border: 1px solid #ddd; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out; display: inline-block; position: relative;  }
    .file-item .filenail>img {cursor: zoom-in; max-height: 100%; max-width: 100%; display: inline-block; vertical-align: middle; }
    .file-item .filenail .info{display: none; }
    .file-item .filenail .file-panel i{font-size: 12px; color: #fff;width: 16px; height: 16px; line-height: 16px;z-index: 5;cursor: pointer;}
    .file-item .filenail .file-panel i.move-picture{cursor: move; }
    .btn-action{text-align: right;}
</style>
<link rel="stylesheet" href="/static/lib/editor/editor.css">
<div class="layuimini-container">
    <div class="layuimini-main">
        <form action="" onsubmit="return false;" class="layui-form" lay-filter="detail-form"   method="post" style="">
            <input type="hidden" name="resId" value="">
            <div class="layui-row main-container">
                <div class="layui-col-xs4 layui-col-sm7 layui-col-md9 main-panel">
                    <header class="title-item">
                        <div class="layui-form-item">
                            <label class="layui-label-title"><i>*</i>标题</label>
                            <div class="layui-input-inline layui-title-input">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                            </div>
                        </div>
                    </header>
                    <div class="content-item">
                        <!--文本填充内容-->
                        <div class="content-part">
                            <div class="content-part-editor">
                                <div class="layui-form-item">
                                    <div id="editor—wrapper">
                                        <div id="toolbar-container"><!-- 工具栏 --></div>
                                        <div id="editor-container"><!-- 编辑器 --></div>
                                    </div>
                                </div>
                            </div>
                            <footer>

                            </footer>
                        </div>
                        <!--文本填充内容-->

                    </div>
                </div>
                <div class="layui-col-xs4 layui-col-sm5 layui-col-md3 side-panel">
                    <div class="extra-set">
                        <div class="extra-action-set">
                            <button type="button" lay-submit="save" lay-filter="submitForm"  class="layui-btn">保存并关闭</button>
                            <button type="button" lay-submit="addMore" lay-filter="submitAndAdd" class="layui-btn layui-btn-danger">保存并新建</button>
                        </div>
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title tab-set">
                                <li class="layui-this">常用</li>

                            </ul>
                            <div class="layui-tab-content" style="padding-right:30px;">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">当前活动：</label>
                                        <div class="layui-input-block">
                                            <input type="hidden" name="subjectId" value="{{.subject.Id}}" />
                                            <input type="hidden" name="resId" value="" />
                                            <button type="button" id="postCategory" class="layui-btn layui-btn-primary">{{.subject.Title}}</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-form-label">所属栏目</div>
                                        <div class="layui-input-block">
                                            <select name="categoryId">
                                                <option value="0" selected>无</option>
                                                {{range $key, $value := .category}}
                                                <option value="{{$value.Id}}">{{$value.Name}}</option>
                                                {{end}}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">缩略图：</label>
                                        <div class="layui-input-block" >
                                            <button type="button" class="layui-btn layui-btn-success upload-img">上传图片</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" id="thumbList">

                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">摘要描述：</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="摘要描述" name="abs" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注：</label>
                                        <div class="layui-input-block">
                                            <textarea placeholder="备注" name="bak" class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">序号：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="orderNum" value="100" class="layui-input">
                                        </div>
                                    </div>
                                </div>

                                <!--                                <div class="layui-tab-item">内容3</div>-->

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </form>

    </div>
</div>
<div style="display: none;">
    <div id="close-btn"></div>
</div>
<script id="imgItem" type="text/template">
    <%#  layui.each(d.list, function(index, item){ %>
    <div class="file-item" id="<% index %>">
        <div class="thumbnail">
            <div class="file-panel">
                <i class="del-icon">移除</i>
            </div>
            <input type="hidden" class="imgs" name="img_<% index %>" value="<% item %>" />
            <img alt="" class="project-list-item-icon" src="<% d.prefix %><% item %>"/>
        </div>
    </div>
    <%#  }) %>
</script>

<script id="fileItem" type="text/template">
    <%#  layui.each(d.list, function(index, item){ %>
    <div class="file-item" id="<% index %>">
        <div class="filenail">
            <div class="file-panel">
                <i class="del-icon">移除</i>
            </div>
            <p><% item.name %></p>
            <input type="hidden" class="files" name="file_<% index %>" value="<% item.name %>][<% item.url %>" />
        </div>
    </div>
    <%#  }) %>
</script>
<script src="/static/lib/editor/editor.js"></script>
<script>
    var __url = '{{ .CommonIn.GetUrlByKey "activity/player/DoSubmit" }}';
    var __doUploadUrl = '{{ .CommonIn.GetUrlByKey "admin/file/DoImgUpload" }}';
    var __imgUploadUrl = '{{ .CommonIn.GetUrlByKey "cms/attachment/upload" }}';

    var __editorHeight = 600;
    var __editor = '{{ .CommonIn.GetUrlByKey "activity/player/edit" }}';
    window.onbeforeunload = function() {
        // 判断是否通过页面按钮直接关闭
        if ($("#close-btn").data("closed") === true) {
            return undefined;
        }
        // 确认是否关闭页面
        return "确定要离开此页面吗？";
    };
    function closePage(){
        $("#close-btn").data("closed", true);
        window.close();
    }
    function subData (data){
        var loadIndex = layer.load(2);
        $.ajax({
            type: "post",
            url: __url,
            data:data,
            success: function (res) {
                layer.close(loadIndex);
                if(res.code==0){
                    layer.alert(res.msg,function(index){
                        closePage()
                        parent.CloseChild(true)
                    })
                }else{
                    layer.alert(res.msg)
                }
            },
            error:function(){
                layer.close(loadIndex);
            },
            complete:function (){

            }
        });
    }
    function resetHeight($){
        var body = $(window).height();
        var tHeight = $(".title-item").outerHeight(true);
        var extraHeight = body-tHeight-40;
        $(".side-panel").height(body+'px');
        $(".content-item").height(extraHeight+'px');
        var saveHeight = $(".extra-action-set").outerHeight();
        var tabHeight = $(".layui-tab-brief").height();
        var tabTitleHeight = $(".layui-tab-title").outerHeight();
        __editorHeight = extraHeight - 60 - 80;
        $("#editor-container").height(__editorHeight+'px');
        $(".layui-tab-content").height(body-saveHeight-tabTitleHeight-30+"px").css('overflow','scroll');
    }
    function showEditor(){
        $(".link-part").hide();
        $(".content-part").show();
    }
    function showLink(){
        $(".content-part").hide();
        $(".link-part").show();

    }
    $("#thumbList").on('click','i.del-icon',function(e){
        e.preventDefault();
        console.log('click')
        $(e.currentTarget).parents('.file-item').remove();
    })
    $("#attachList").on('click','i.del-icon',function(e){
        e.preventDefault();
        console.log('click')
        $(e.currentTarget).parents('.file-item').remove();
    })
    //添加上传附件图
    function appendImg(imgs){
        console.log(imgs)
        //res.data.absUrl = __base.domain+res.data.url;
        layui.laytpl($("#imgItem").html()).render({'list':imgs,'prefix':__base.domain}, function(html){
            $('#thumbList').append(html);
        });
    }
    //添加上传附件图
    function appendFile(files){
        for(let i=0;i<files.length;i++){
            let tmp = files[i].split("][");
            files[i] = {
                name:tmp[0],
                url:tmp[1]
            }
        }
        layui.laytpl($("#fileItem").html()).render({'list':files,'prefix':__base.domain}, function(html){
            $('#attachList').append(html);
        });
    }
    function handlerThumbnail(imgs){

        let thumbnail = $.trim(imgs)
        if(thumbnail == ''){
            return
        }
        return appendImg(thumbnail.split(","))
    }
    function handlerFilenail(files){
        files = $.trim(files)
        if(files == ''){
            return
        }
        return appendFile(files.split(","))
    }
    layui.use(['jquery','form', 'layedit', 'laydate','dropdown','colorpicker','laytpl'], function () {
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,dropdown = layui.dropdown
            ,colorpicker = layui.colorpicker
            ,laytpl = layui.laytpl;
        var $ = layui.jquery;
        laytpl.config({
            open: '<%',
            close: '%>'
        });
        resetHeight($);

        const { createEditor, createToolbar } = window.wangEditor
        const editorConfig = {
            placeholder: '点击这里开始编辑',

            MENU_CONF:{
                'uploadImage' : {
                    server: __doUploadUrl,
                    fieldName: 'file',
                    // 单个文件上传成功之后
                    onSuccess:function(file, res) {  //
                        console.log(`${file.name} 上传成功`, res)
                    },
                    // 单个文件上传失败
                    onFailed:function(file, res) {   //
                        console.log(`${file.name} 上传失败`, res)
                    },
                    // 上传错误，或者触发 timeout 超时
                    onError:function(file, err, res) {  //
                        layer.alert(`${file.name} 上传出错`)
                        console.log(`${file.name} 上传出错`, err, res)
                    },
                    customInsert:function(res, insertFn) {                  // JS 语法
                        // customInsert(res, insertFn) {                  // JS 语法
                        // res 即服务端的返回结果
                        const url = __GBLOBAL.server+res.data.url;
                        const alt = res.data.alt || '';
                        const href = res.data.href || '';
                        // 从 res 中找到 url alt href ，然后插入图片

                        insertFn(url,alt,href )
                    },
                },

            },
            onChange(editor) {
                //const html = editor.getHtml()

                // 也可以同步到 <textarea>
            }
        }
        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', // or 'simple'
        });
        const toolbarConfig = {};
        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        });
        __editor = editor
        //日期


        //自定义事件 - hover
        dropdown.render({
            elem: '#moreAction'
            ,trigger: 'hover'
            ,data: [{
                title: '直接关闭'
                ,id: 100
            },]
        });
        //预定义颜色项

        $("#cancelAdd").click(function(e){
            e.preventDefault();
            parent.CloseChild(false)
        });



        $(".upload-img").click(function (e){
            e.preventDefault();
            let index = layer.open({
                title: '缩略图上传',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['640px', '500px'],
                content: __imgUploadUrl,
            });
        })

        //监听提交
        form.on('submit(submitForm)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            //subData(data.field)
            let content = data.field;

            content.content = editor.getHtml()
            console.log(content)
            console.log(editor.getHtml())
            let thumbnail = []
            $(".imgs").each(function (index,item){
                thumbnail.push($(item).val())
            })
            content.image = thumbnail.join(",")
            subData(content)
            return false;
        });
        form.on('submit(submitAndAdd)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            //subData(data.field)
            let content = data.field;
            content.content = editor.getHtml()
            let thumbnail = []
            $(".imgs").each(function (index,item){
                thumbnail.push($(item).val())
            })
            content.image = thumbnail.join(",")

            subData(content)
            return false;
        });

        //表单初始赋值



    });
</script>